<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-10-20 15:08:05
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-12-05 20:30:37
 * @FilePath: /nhw/src/views/Assignment/AssignmentDetail.vue
-->
<template>
  <Layout title="任务详情" class="assignment-snapshot-container">
    <template #right>
      <span @click="handleHistory" style="color: #e16712">流程历史</span>
    </template>
    <section
      :style="{
        height:
          btnStateList.length <= 0
            ? 'calc(100% - 0.26667rem)'
            : 'calc(100% - 50px)',
      }"
    >
      <div class="title">
        <h4>{{ content }}</h4>
        <span class="state">{{ state }}</span>
      </div>
      <FilesComp :files="mainFields" />
    </section>

    <FunctionButton
      :btnList="btnStateList"
      :ifDefale="ifDelayed"
      @btn-click="processingTask"
      v-if="btnStateList.length > 0"
    />
    <ActionSheet v-model="show" :actions="actions" @select="onSelect" />
  </Layout>
</template>

<script>
import Layout from "components/Layout";
import FunctionButton from "./components/FunctionButton.vue";
import FilesComp from "./components/FilesComp.vue";
import axios from "axios";
import { ActionSheet } from "vant";
import { getEquipRepairAllocation } from "@/api/assignment.js";
import { getDictionary } from "@/api/work.js";
export default {
  name: "AssignmentDetail",
  components: {
    Layout,
    FunctionButton,
    FilesComp,
    ActionSheet,
  },
  data() {
    return {
      token: "",
      state: "",
      show: false,
      btnData: null,
      mainFields: [],
      btnStateList: [],
      actions: [],
    };
  },
  computed: {
    content() {
      return this.$route.query.content;
    },
    moduleId() {
      return this.$route.query.moduleId;
    },
    modelId() {
      return this.$route.query.modelId;
    },
    pkValue() {
      return this.$route.query.pkValue;
    },
    ifDelayed() {
      console.log("sdfasd");
      if (this.mainFields.length <= 0) {
        return false;
      } else {
        const arr = this.mainFields.filter((item, index) => {
          return item.name === "ifDelayed" || item.name === "taskState";
        });
        console.log(
          arr.some((item) => {
            return item.value === "逾期" || item.value === "Y";
          })
        );

        return arr.some((item) => {
          return item.value === "逾期" || item.value === "Y";
        });
      }
    },
  },
  created() {
    this.token = window.localStorage.getItem("access_token");
    this.$toast.loading("加载中...");
    this.getWorkflowForm({
      moduleId: this.moduleId,
      pkValue: this.pkValue,
    }).then((res) => {
      this.mainFields = res.mainFields;
      this.state = res.stateFieldValue;
    });

    this.getWorkFlowOperationList({
      moduleId: this.moduleId,
      pkValue: this.pkValue,
      modelId: this.modelId,
    }).then((res) => {
      console.log(res);
      this.$toast.clear();
      this.btnStateList = res;
    });
    getDictionary("EquipRepairsManage-distributeType").then((res) => {
      this.actions = res.param.data;
    });
  },

  mounted() {},

  methods: {
    async onSelect(item) {
      this.show = false;
      await getEquipRepairAllocation({ type: item.id, ermNo: this.pkValue });
      this.$router.push({
        name: "SubmitProcess",
        params: {
          data: this.btnData,
          moduleId: this.moduleId,
          modelId: this.modelId,
          pkValue: this.pkValue,
        },
      });
    },
    handleHistory() {
      this.$router.push({
        name: "WorkflowSteps",
        params: { workflowId: this.moduleId, pkValue: this.pkValue },
      });
    },
    processingTask(data) {
      console.log(data);
      this.btnData = data;
      if (data.oprIdx === -2) {
        //已阅
        this.submitNotify({
          pgmId: this.moduleId,
          wfId: this.modelId,
          pkValue: this.pkValue,
          cNodeId: data.cNodeId,
        });
      } else if (
        this.moduleId === "equipRepairsManage" &&
        data.oprName === "分配"
      ) {
        //分配
        console.log(data.oprName);
        this.show = true;
      } else {
        this.$router.push({
          name: "SubmitProcess",
          params: {
            data,
            moduleId: this.moduleId,
            modelId: this.modelId,
            pkValue: this.pkValue,
          },
        });
      }
    },
    //获取任务单详情
    async getWorkflowForm({ moduleId, pkValue } = {}) {
      const res = await axios.get("/nhw/workflow/api/getWorkflowForm.ajax", {
        params: {
          access_token: this.token,
          moduleId,
          pkValue,
        },
      });
      if (res.status == 200) {
        const { data } = res;
        return data;
      } else {
        this.$toast.fail("网络异常！");
        throw "network error";
      }
    },
    //获取任务操作按钮
    async getWorkFlowOperationList({ moduleId, pkValue, modelId } = {}) {
      const res = await axios.get(
        "/nhw/workflow/api/getWorkFlowOperationList.ajax",
        {
          params: {
            access_token: this.token,
            moduleId,
            pkValue,
            modelId,
          },
        }
      );
      if (res.status == 200) {
        const { data } = res;
        return data;
      } else {
        this.$toast.fail("网络异常！");
        throw "network error";
      }
    },
    // 知会 已阅
    submitNotify({ pgmId, pkValue, wfId, cNodeId } = {}) {
      this.$toast.loading("提交中...");
      axios
        .get("/nhw/workflow/api/submitNotify.ajax", {
          params: {
            access_token: this.token,
            pgmId,
            pkValue,
            wfId,
            cNodeId,
          },
        })
        .then((res) => {
          this.$toast(res.data.msgInfo);
          if (res.data.state == 0) {
            setTimeout(() => {
              this.$router.back();
            }, 500);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~style/var.less");
@import url("~style/mixin.less");
.assignment-snapshot-container {
  height: 100%;
  section {
    box-sizing: border-box;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-top: 20px;
    .title {
      height: 60px;
      width: 96%;
      margin: auto;
      text-align: center;
      border-bottom: 2px solid @primary;
      position: relative;
      h4 {
        font-size: 32px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        line-height: 60px;
      }
      span {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        &.state {
          min-width: 160px;
          height: 80%;
          line-height: 48px;
          border-top-left-radius: 100px;
          border-bottom-left-radius: 100px;
          background: @primary;
          font-size: 28px;
          font-weight: normal;
          color: #fff;
          margin-right: -20px;
        }
      }
    }
  }
  .function-button-container {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  /deep/ .van-field__label {
    width: 8.2em;
  }
}
</style>